
<template>
  <div class="my-heads">
    <div class="center">
      <div class="logo" @mouseover="mousein = 1" @mouseout="mousein = 0">
        <img
          id="logoimg"
          src="https://bbs.mihoyo.com/_nuxt/img/miHoYo_Game.2457753.png"
          alt=""
        />
        <span>米游社·原神</span>
        <img
          src="@/assets/icon1.svg"
          alt=""
          :class="{ active: mousein == 1 }"
        />
      </div>
      <div
        class="logobottom"
        v-show="mousein"
        @mouseover="mousein = 1"
        @mouseout="mousein = 0"
      >
        <ul>
          <li>
            <img
              src="https://bbs.mihoyo.com/_nuxt/img/game-bh3.abe5ead.jpg"
              alt=""
            /><span>崩坏3</span>
          </li>
          <li>
            <img
              src="https://bbs.mihoyo.com/_nuxt/img/game-bh2.a258e9f.jpg"
              alt=""
            /><span>崩坏学院2</span>
          </li>
          <li>
            <img
              src="https://bbs.mihoyo.com/_nuxt/img/game-sr.4f80911.jpg"
              alt=""
            /><span>崩坏:星穹铁道</span>
          </li>
        </ul>
        <div class="model">
          <p>板块</p>

          <ul>
            <li>甲板</li>
            <li>攻略</li>
            <li>官方</li>
            <li>百科</li>
          </ul>
        </div>
      </div>
      <div class="nav">
        <ul>
          <li
            :class="{ active: DefaultChecked == 1 }"
            @click="navigatorTo('/', 1)"
          >
            首页
          </li>
          <li
            :class="{ active: DefaultChecked == 2 }"
            @click="navigatorTo('/PlayerShare', 2)"
          >
            酒馆
          </li>
          <li
            :class="{ active: DefaultChecked == 3 }"
            @click="navigatorTo('/Scheme', 3)"
          >
            攻略
          </li>
          <li
            :class="{ active: DefaultChecked == 4 }"
            @click="navigatorTo('/Off', 4)"
          >
            官方
          </li>
          <a
            href="https://bbs.mihoyo.com/ys/strategy/?bbs_presentation_style=no_header"
            target="blank"
          >
            <li>观测枢</li></a
          >
          <a
            href="https://mall.mihoyo.com/ys?utm_source=bbs&utm_medium=mys&utm_campaign=navigationBar"
            target="blank"
          >
            <li>米游铺</li>
          </a>
          <li
            class="more"
            :class="{
              active:
                DefaultChecked == 5 ||
                DefaultChecked == 6 ||
                DefaultChecked == 7,
            }"
            @mouseover="mousein2 = 1"
            @mouseout="mousein2 = 0"
          >
            <span>{{ selected }}</span>
            <img
              :class="{ active: mousein2 }"
              src="@/assets/icon1.svg"
              alt=""
            />
          </li>
        </ul>
        <div
          class="navbottom"
          v-show="mousein2"
          @mouseover="mousein2 = 1"
          @mouseout="mousein2 = 0"
        >
          <p @click="GoView('同人图', '/writeShare', 5)">同人图</p>
          <p @click="GoView('COS', '/Cos', 6)">COS</p>
          <p @click="GoView('硬核', '/Code', 7)">硬核</p>
        </div>
      </div>
      <div class="search" v-show="!$route.meta.search">
        <input
          type="text"
          :class="{ deactivate: inputC }"
          @focus="CSeach"
          @blur="BSeach"
          v-model="SValue"
          @keyup.enter="Search"
        />
        <img src="@/assets/icon2.svg" alt="" @click="Search" />
      </div>
      <div class="LoginState nav" v-if="LoginState">
        <ul>
          <li
            :class="{ active: DefaultChecked == 8 }"
            @click="navigatorTo('/MeCare', 8)"
          >
            关注
          </li>
        </ul>
      </div>
      <div v-if="!LoginState.length" class="avatar" @click="Click = 1">
        <img src="@/assets/avatarDefaultPc.png" alt="" />
      </div>
      <div
        v-else
        class="avatar"
        @mouseover="mousein3 = 1"
        @mouseout="mousein3 = 0"
        @click="goUser"
      >
        <img
          :src="LoginState[0].avatar"
          alt=""
        />
        <div
          class="avatarBottom"
          v-show="LoginState && mousein3"
          @mouseover="mousein3 = 1"
          @mouseout="mousein3 = 0"
        >
          <div class="user">
            <div class="userAvatar">
              <img
                :src="LoginState[0].avatar"
                alt=""
              />
              <p>{{LoginState[0].nickname}}</p>
            </div>
            <div class="userData">
              <div>
                <p>0</p>
                <p>粉丝</p>
              </div>
              <div>
                <p>0</p>
                <p>关注</p>
              </div>
            </div>
          </div>
          <div class="userNav">
            <ul>
              <li @click="goUser">个人中心</li>
              <li>创作中心</li>
              <li>米哈游通行证</li>
            </ul>
          </div>
          <div class="userExit">
            <ul>
              <li @click.stop="exitUser">退出</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="floor" v-show="!LoginState.length && Click == 1">
      <div class="login" ref="animate">
        <div class="nav">
          <span :class="{ active: Logintab == 1 }" @click="switchTab(1)"
            >登录</span
          >
          <span :class="{ active: Logintab == 2 }" @click="switchTab(2)"
            >注册</span
          >
        </div>
        <div class="userInput" v-if="Logintab == 1">
          <input
            type="text"
            name=""
            v-model="uname"
            placeholder="用户名"
            minlength="10"
            maxlength="20"
          />
          <input
            type="password"
            name=""
            v-model="upwd"
            placeholder="密码"
            minlength="6"
            maxlength="10"
          />

          <button @click="LoginTo">安全登录</button>
        </div>
        <div class="userInput" v-else>
          <input
            type="text"
            name=""
            placeholder="用户名"
            minlength="6"
            maxlength="12"
            v-model="uname"
            ref="uname"
          />
          <input
            type="password"
            name=""
            placeholder="密码"
            minlength="6"
            maxlength="10"
            v-model="upwd"
          />
          <input
            type="password"
            name=""
            placeholder="确认密码"
            minlength="6"
            maxlength="10"
            v-model="repwd"
          />
          <button @click="RegisterTo">快速注册</button>
        </div>
        <div class="area">
          <p>
            注册/登录即代表您同意并遵守<a
              href="https://user.mihoyo.com/#/agreement?hideBack=true"
              >《米哈游通行证用户服务协议》</a
            ><a href="https://user.mihoyo.com/#/privacyAgreement?hideBack=true"
              >《米哈游通行证用户个人信息及隐私保护政策》</a
            >
          </p>
        </div>
        <img
          @click="Click = 0"
          class="remove"
          src="@/assets/icon12.svg"
          alt=""
        />
      </div>
          <show-toast ref="toast" :text="'注册成功'" :type="'success'" />
          <show-toast ref="toast1" :text="'用户名已存在'" :type="'fail'" />
          <show-toast ref="toast3" :text="'登录成功'" :type="'success'" />
          <show-toast ref="toast4" :text="'登录失败'" :type="'fail'"/>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ShowToast from "./ShowToast.vue";
export default {
  components: { ShowToast },
  methods: {
    CSeach(e) {
      this.inputC = 0;
    },
    BSeach() {
      this.inputC = 1;
    },
    switchTab(n) {
      if (this.Logintab == n) return;
      this.$refs.animate.classList.toggle("switch", true);
      this.upwd = this.repwd = this.uname = "";
      this.Logintab = n;
      setTimeout(() => {
        this.$refs.animate.classList.remove("switch");
      }, 1000);
    },
    Search() {
      if (!this.SValue.trim()) return;
      this.$store.commit("pushSearch", this.SValue);
      this.$router.push("/Search?keyword=" + this.SValue);
    },
    exitUser() {
      this.$store.commit("setLoginState", []);
      if (this.$route.meta.needLogin) {
        this.$router.push("/");
      }
    },
    GoView(n, url, b) {
      (this.selected = n), (this.DefaultChecked = 5), (this.mousein2 = 0);
      if (b == this.$route.meta.selected) return;
      this.$router.push(url);
    },
    navigatorTo(url, n) {
      // console.log(this.$route.meta.selected)
      if (n == this.$route.meta.selected) return;
      this.DefaultChecked = n;
      this.$router.push(url);
      this.DefaultChecked=this.$route.meta.selected
    },
    goUser() {
      console.log(this.$route.fullPath)
      if (this.$route.fullPath == "/UserFeil/replyList") return;
      this.$router.push("/UserFeil?id="+this.LoginState[0].id);
      this.$router.go(0)
    },
    RegisterTo() {
      let uname = this.uname.trim();
      let upwd = this.upwd.trim();
      let repwd = this.repwd.trim();
      if (!uname || !upwd || !repwd) return alert("输入的值不能为空");
      if (uname.length < 6 || uname.length > 12) return alert("用户名不合法");
      if (upwd.length < 6 || upwd.length > 10) return alert("密码长度不合法");
      if (repwd !== upwd) return alert("两次密码不一致");
      let params = "uname=" + uname + "&upwd=" + upwd;
      this.axios.post("/user/register", params).then((res) => {
        if (res.data.code == 201) {
          this.$refs.toast1.$data.isShow = 1;
          setTimeout(() => {
            this.$refs.uname.focus();
            this.uname = "";
            this.$refs.toast1.$data.isShow = 0;
          }, 1000);
        } else {
          this.$refs.toast.$data.isShow = 1;
          setTimeout(() => {
            this.switchTab(1);
            this.uname = uname;
            this.$refs.toast.$data.isShow = 0;
          }, 1000);
        }
      });
    },
    LoginTo() {
      let uname = this.uname.trim();
      let upwd = this.upwd.trim();
      if (!uname || !upwd) return alert("不能为空");
      let params = "uname=" + uname + "&upwd=" + upwd;
      this.axios.post("/user/login", params).then((res) => {
        if (res.data.code == 201) {
          this.$refs.toast4.$data.isShow = 1;
          setTimeout(() => {
            this.$refs.toast4.$data.isShow = 0;
          }, 1000);
        } else {
          this.$refs.toast3.$data.isShow = 1;
          this.$store.commit('setLoginState',res.data.data)
          setTimeout(() => {
            this.$refs.toast3.$data.isShow = 0;
            this.Click = 0;
          }, 1000);
        }
      });
    },
  },
  computed: {
    ...mapState(["LoginState"]),
  },
  data() {
    return {
      Logintab: 1,
      DefaultChecked: this.$route.meta.selected,
      mousein: 0,
      mousein2: 0,
      mousein3: 0,
      inputC: 1,
      selected: this.$route.meta.CheckName || "更多",
      Click: 0,
      SValue: "",
      uname: "",
      upwd: "",
      repwd: "",
    };
  },
  watch: {
    LoginState(newvalue, oldvlue) {
      console.log(newvalue, oldvlue);
    },
  },
};
</script>

<style scoped>
.my-heads {
  width: 100%;
  height: 66px;
  background-color: #1f2233;
  position: fixed;
  top: 0;
  z-index: 500;
}
.center {
  width: 1200px;
  height: 66px;
  margin: 0 auto;
}
.logo {
  float: left;
  display: inline-flex;
  width: 300px;
  position: relative;
}
.logo img:first-child {
  height: 66px;
}
.logo span {
  color: white;
  line-height: 66px;
  font-size: 14px;
  font-weight: bold;
}
.logo img:last-child {
  margin-left: 5px;
  width: 15px;
  transition: 500ms;
}
.logo img.active {
  transform: rotateZ(180deg);
}
.logobottom {
  display: flex;
  justify-content: space-between;
  width: 400px;
  height: 192px;
  position: absolute;
  top: 66px;
  z-index: 100;
  padding: 10px 0 10px;
  border-left: 1px solid rgba(24, 24, 24, 0.1);
  box-shadow: 2px 2px 2px rgba(24, 24, 24, 0.1);
  border-radius: 0px 0px 10px 10px;
  background: #fff;
}
.logobottom ul {
  width: 58%;
  overflow: auto;
}
.logobottom ul:first-child li {
  display: flex;
  padding: 12px;
}
.logobottom ul:first-child li:hover {
  background: #f5f5f5;
}
.logobottom ul:first-child li span {
  line-height: 40px;
  margin-left: 10px;
}
.logobottom ul:first-child li img {
  width: 40px;
}
.logobottom.mousein {
  display: none;
}
.logobottom .model {
  width: 39%;
  overflow: auto;
}
.logobottom .model p {
  font-weight: bold;
  text-align: center;
  padding: 10px 10px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
.logobottom .model ul {
  overflow: auto;
}
.logobottom .model ul li {
  padding: 12px;
}
.nav {
  margin-left: 30px;
  position: relative;
  float: left;
}
.nav ul {
  display: inline-flex;
  justify-content: space-evenly;
  user-select: none;
}
.nav ul li {
  box-sizing: border-box;
  font-size: 14px;
  color: white;
  line-height: 66px;
  padding: 0px 18px;
}
.nav ul .more img {
  width: 15px;
  transition: 500ms;
  margin-left: 2px;
  /* margin-top: 30px; */
  transform: translateY(10%);
}
.nav ul .more {
  padding: 0 20px;
}
.nav ul .more img.active {
  transform: rotateZ(180deg) translateY(-10%);
}
.nav ul li:hover {
  background: #474a58;
}
.nav ul li.active {
  font-size: 16px;
  font-weight: bold;
  background: #474a58;
}
.navbottom {
  padding: 10px 0 10px;
  right: 0;
  width: 130px;
  background: #fff;
  z-index: 100;
  position: absolute;
  border-left: 1px solid rgba(24, 24, 24, 0.1);
  box-shadow: 2px 2px 2px rgba(24, 24, 24, 0.1);
  border-radius: 0px 0px 10px 10px;
}
.navbottom p {
  padding: 10px 20px;
  height: 20px;
  font-size: 14px;
  color: #1f2233;
}
.navbottom p:hover {
  background: #f5f5f5;
}
.search {
  position: relative;
  float: right;
  /* line-height: 66px; */
  margin-right: 160px;
}
.search input {
  position: absolute;
  right: 0;
  top: 33px;
  width: 90px;
  height: 20px;
  padding: 5px 15px;
  background: #505360;
  border-radius: 20px;
  border: 0;
  color: white;
  transition: 0.5s;
  transform: translateY(-50%);
  outline: none;
}
.search input.deactivate {
  width: 50px;
  border: 0;
}
.search img {
  top: 33px;
  right: 10px;
  transform: translateY(-50%);
  position: absolute;
  height: 16px;
}

.avatar {
  float: right;
  height: 66px;
  padding: 14px 16px;
  margin-left: 150px;
  box-sizing: border-box;
  position: relative;
}
.avatar img {
  width: 38px;
   border-radius: 100%;
}
.avatar:hover {
  background: #474a58;
}
.avatarBottom {
  box-sizing: border-box;
  width: 260px;
  background: white;
  position: absolute;
  right: 0%;
  margin-top: 10px;
  border-radius: 0 0 10px 10px;
  border-left: 1px solid rgba(24, 24, 24, 0.1);
  box-shadow: 2px 2px 2px rgba(24, 24, 24, 0.1);
}
.user {
  padding: 20px;
  border-bottom: 1px solid #999;
}
.userAvatar {
  margin: 0 auto;
  text-align: center;
}
.userAvatar img {
  width: 80px;
  border-radius: 100%;
}
.userData {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: space-around;
  color: #999;
}
.userData div p:first-child {
  color: #555;
}
.userNav {
  padding: 10px 0;
  border-bottom: 1px solid #999;
}
.userNav ul li {
  padding: 12px 16px;
  font-size: 14px;
}
.userNav ul li:hover {
  background: #f5f5f5;
}
.userExit {
  padding: 10px 0;
}
.userExit ul li {
  padding: 12px 16px;
  font-size: 14px;
}
.userExit ul li:hover {
  background: #f5f5f5;
}
.floor {
  top: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(144, 144, 144, 0.5);
}
.login {
  position: fixed;
  top: 50%;
  left: 50%;
  /* transform: translate(-50%, -50%); */
  background: white;
  width: 420px;
  box-sizing: 200;
  display: flex;
  flex-flow: column wrap;
  transition: 1s;
  margin-left: -210px;
  margin-top: -10%;
}
.login.switch {
  animation: mymove 1s;
  pointer-events: none;
}
@keyframes mymove {
  0% {
    -webkit-transform: scale(1) rotate3d(1, 1, 0, 0deg);
    transform: scale(1) rotate3d(1, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate3d(1, 1, 0, -180deg);
    transform: scale(0.5) rotate3d(1, 1, 0, -180deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1) rotate3d(1, 1, 0, -360deg);
    transform: scale(1) rotate3d(1, 1, 0, -360deg);
  }
}
.login .nav {
  user-select: none;
  width: 80%;
  display: flex;
  padding: 20px 20px;
  border-bottom: 1px dashed #999;
}
.login .nav span {
  font-size: 20px;
  margin-right: 20px;
  padding-bottom: 10px;
  color: #999;
}
.login .nav span.active {
  color: #1f2233;
  border-bottom: 4px orange solid;
}
.login .userInput {
  display: flex;
  flex-flow: column nowrap;
  padding: 20px 20px;
  align-items: center;
  height: 240px;
}
.login .userInput input {
  border-radius: 10px;
  border: 1px solid #999;
  box-shadow: 0 2px 4px rgba(24, 24, 24, 0.4);
  width: 80%;
  padding: 0 10px;
  line-height: 40px;
  margin-bottom: 10px;
  outline: none;
  transition: 600ms;
}
.login .userInput input:focus {
  border-color: #1fbbf4;
}
.login .userInput button {
  position: absolute;
  padding: 15px 0;
  bottom: 20%;
  width: 30%;
  border-radius: 10px;
  border: 0;
  font-size: 20px;
  color: white;
  background: #1fbbf4;
}
.login .area {
  font-size: 12px;
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.login .area a {
  text-decoration: none;
  color: #1fbbf4;
}
.remove {
  width: 40px;
  position: absolute;
  top: -30px;
  right: -30px;
}
</style>